<template>
	<view style="padding:40rpx">
		<view
			style="padding: 20rpx;margin: 80rpx 0;background-color: #fff;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1);border-radius: 10rpx;">
			<view style="margin: 50rpx 30rpx;font-size: 40rpx;">欢迎注册</view>
			<uni-forms ref="registerRef" :modelValue="user"  validate-trigger="blur">
				<uni-forms-item name="email" required>
					<uni-easyinput prefixIcon="email" type="text" v-model="user.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item name="verificationCode" required>
					<view style="display: flex;">
						<view style="width: 300rpx;">
							<uni-easyinput prefixIcon="chat" type="text" v-model="user.verificationCode"
								placeholder="请输入动态码" />
						</view>
						<view style="flex: 1;margin-left: 20rpx;">
							<button type="primary" style="height:70rpx;font-size: unset;" :disabled="disabled"
								@click="getCode">{{content}}</button>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="phonenumber" required>
					<uni-easyinput prefixIcon="phone" type="text" v-model="user.phonenumber" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item name="userName" required>
					<uni-easyinput prefixIcon="person" type="text" v-model="user.userName" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password" required>
					<uni-easyinput prefixIcon="locked" type="text" v-model="user.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="confirmPass" required>
					<uni-easyinput prefixIcon="locked" type="text" v-model="user.confirmPass" placeholder="请确认密码" />
				</uni-forms-item>
				<uni-forms-item>
					<button
						style="background-color: #127add;border-color: #127add;color: #fff;height:70rpx;line-height: 70rpx;"
						@click="register">注 册</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request';
	
	export default {
		data() {
			return {
				user: {},
				email: null,
				disabled: false,
				second: null,
				timer: null,
				rules: {
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱'
						}, {
							validateFunction: function(rule,value,data,callback){
								const reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
								if (value == null) {
									this.pass = false;
									callback('请输入邮箱地址')
								} else if (!reg.test(value)) {
									this.pass = false;
									callback('请输入正确的邮箱地址')
								} else {
									let params = {
										email: value,
									}
									request.get("/user/isEmailExist", params).then(res => {
										if (res.code != 200) {
											callback('邮箱已存在')
										} 
										return true
									})
								}
							}
						}]
					},
					verificationCode: {
						rules: [{
							required: true,
							errorMessage: '请输入动态码'
						}, {
							minLength: 4,
							maxLength: 4,
							errorMessage: '动态码为{minLength}位'
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							minLength: 11,
							maxLength: 11,
							errorMessage: '手机号码为{minLength}位'
						}]
					},
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入账号'
						}, {
							minLength: 2,
							maxLength: 10,
							errorMessage: '账号长度在{minLength}到{maxLength}个字符'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							minLength: 1,
							maxLength: 20,
							errorMessage: '密码长度在{minLength}到{maxLength}个字符'
						}]
					},
					confirmPass:{
						rules:[]
					}
				}
			}
		},
		onReady() {
			this.$refs.registerRef.setRules(this.rules);
		},
		methods: {
			register() {

			},
			countTime() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.second = TIME_COUNT;
					this.disabled = true;
					this.timer = setInterval(() => {
						if (this.second > 0 && this.second <= TIME_COUNT) {
							this.second--;
						} else {
							this.disabled = false;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
			getCode() {
				if (this.pass) {
					this.countTime();
					let params = {
						email: this.user.email
					}
					this.$request.get('/user/sendEmailCode', params).then(res => {
						if (res.code === 200) {
							uni.showToast({
								icon: 'success',
								title: '动态码已发送到您的邮箱，请及时查看'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: '动态码发送失败，请重新获取'
							})
						}
					})
				}
			}
		},
		computed: {
			content() {
				return this.disabled ? `${this.second}s后重新获取` : '获取动态码';
			},
			pass() {
				const reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
				let params = {
					email: this.user.email,
				}
				this.$request.get("/user/isEmailExist", params).then(res => {
					if (res.code == 200) {
						console.log(this.user.email != null && reg.test(this.user.email))
					return this.user.email != null && reg.test(this.user.email) ? true : false;
					} 
					})
					return false;
			}
		}
	}
</script>

<style>

</style>